<script setup>
import { ref } from 'vue';
import LoginDaog from '@/components/login/dialog.vue'
import { regist, login } from '@/apis/login';
import { ElMessage } from 'element-plus'
import router from '@/router';
import { Userstore } from '@/stores/user';
const userstore = Userstore()
const doaling = ref(null)
const logininfo = ref({ account: '', password: '' })
const loginrule = ref({
  account: [
    { required: true, message: '输入账号', trigger: 'blur' },
    { min: 6, max: 12, message: '6-12位', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '6-12位', trigger: 'blur' },
  ],
})
const registinfo = ref({ account: '', password: '', name: '', email: '' })
const registrule = ref({
  account: [
    { required: true, message: '输入账号', trigger: 'blur' },
    { min: 6, max: 12, message: '6-12位', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '6-12位', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '输入昵称', trigger: 'blur' },
    { min: 2, max: 6, message: '2-6位', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '输入邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ],
})
const activeName = ref('0')
const nopwd = () => {
  doaling.value.open()
}
const logininfoRef = ref()
//登录
const loginbtn = () => {
  logininfoRef.value.validate(async (valid) => {
    if (valid) {
      const res = await login(logininfo.value)
      if(res.data.status!==200){
        return  ElMessage.error(res.data.message)
      }
      userstore.setuserinfo(res.data.data)
      localStorage.setItem('token',res.data.token)
      logininfoRef.value.resetFields()
      router.push('/home')
    }
  })
}
//注册
const regestRef = ref()
const registbtn = () => {
  regestRef.value.validate(async (valid) => {
    if (valid) {
      const res = await regist(registinfo.value)
      if (res.status === 200) {
        ElMessage.success('注册成功请返回重新登录')
      }
      else{
        ElMessage.error(res.data.message)
      }
      regestRef.value.resetFields()      
    }
  })
}
</script>

<template>
  <div class="content">
    <div class="header">
      <h1>后台管理系统</h1>
      <p>欢迎来到xxx系统</p>
    </div>
    <div class="main">
      <el-card style="max-width: 500px" class="box-card">
        <el-tabs v-model="activeName" class="tabs" type="card" :stretch="true">
          <el-tab-pane label="登录" name="0">
            <el-form ref="logininfoRef" :model="logininfo" :rules="loginrule">
              <el-form-item label="账号" prop="account">
                <el-input v-model="logininfo.account" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="logininfo.password" type="password" show-password />
              </el-form-item>
            </el-form>
            <el-button type="success" @click="loginbtn">登录</el-button>
            <el-button type="danger" style="float: right;" @click="nopwd">忘记密码</el-button>
          </el-tab-pane>
          <el-tab-pane label="注册" name="1">
            <el-form ref="regestRef" :model="registinfo" :rules="registrule">
              <el-form-item label="账号" prop="account">
                <el-input v-model="registinfo.account" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="registinfo.password" type="password" show-password />
              </el-form-item>
              <el-form-item label="昵称" prop="name">
                <el-input v-model="registinfo.name" />
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="registinfo.email" />
              </el-form-item>
            </el-form>
            <el-button type="primary" @click="registbtn">注册</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <LoginDaog ref="doaling"></LoginDaog>
  </div>
</template>

<style lang="scss">
.content {

  width: 100%;
  min-height: 100vh;
  /* 使用视口高度确保至少铺满整个屏幕高度 */

  /* cover确保图片覆盖整个容器，可能的话会被裁剪 */
  .header {
    width: 100%;
    text-align: center;
    font-size: 60px;
  }

  .main {
    height: 500px;
    margin: 30px auto;

    .el-form-item__label {
      color: black;
    }

    .box-card {
      margin: 0 auto;
    }
  }
}
</style>
